<!--
 * @Author: 码上talk|RC/3189482282@qq.com
 * @Date: 2021-12-14 08:39:39
 * @LastEditTime: 2021-12-15 11:06:08
 * @LastEditors: 码上talk|RC
 * @Description: 
 * @FilePath: /ma-portal/pages/_test/index.vue
-->
<template>
  <view class="_test">
    <view class="t-canvas">
      <canvas canvas-id="canvas_wi" :style="canvas_style" class="myCanvas" />
    </view>
    <view class="t-img">
      <image
        src="@/static/image/_test/heart_button.png"
        class="bt-img"
        @tap="onClickImage"
        :style="style_img"
      />
    </view>
  </view>
</template>

<script>
const besselLines = [[{ x: 30, y: 400 }, { x: 70, y: 300 }, { x: -50, y: 150 }, { x: 30, y: 0 }], [{ x: 30, y: 400 }, { x: 30, y: 300 }, { x: 80, y: 150 }, { x: 30, y: 0 }], [{ x: 30, y: 400 }, { x: 0, y: 90 }, { x: 80, y: 100 }, { x: 30, y: 0 }]];
const thumbsUpImgs = [require("@/static/image/_test/heart1.png"), require("@/static/image/_test/heart2.png"), require("@/static/image/_test/heart3.png")];
const factor = {
  speed: .008,
  t: 0
};
let ctx = null;

export default {
  data () {
    return {
      style_img: '',
      timer: null,
      queue: []
    }
  },
  onLoad: function () {
    ctx = uni.createCanvasContext('canvas_wi');
    this.timer = setInterval(() => {
      ctx.draw();
    }, 20);
  },
  onUnload: function () {
    this.timer && clearInterval(this.timer);
    this.timer = null;
    if (this.queue.length) {
      for (let i in this.queue) {
        this.queue[i].timer && clearInterval(this.queue[i].timer);
      }
      this.queue = [];
    }
  },
  methods: {
    drawImage (line, img, idx) {
      var p10 = line[0];
      var p11 = line[1];
      var p12 = line[2];
      var p13 = line[3];

      var t = this.queue[idx].factor.t;

      var cx1 = 3 * (p11.x - p10.x);
      var bx1 = 3 * (p12.x - p11.x) - cx1;
      var ax1 = p13.x - p10.x - cx1 - bx1;

      var cy1 = 3 * (p11.y - p10.y);
      var by1 = 3 * (p12.y - p11.y) - cy1;
      var ay1 = p13.y - p10.y - cy1 - by1;

      var xt1 = ax1 * (t * t * t) + bx1 * (t * t) + cx1 * t + p10.x;
      var yt1 = ay1 * (t * t * t) + by1 * (t * t) + cy1 * t + p10.y;

      ctx.drawImage(img, xt1, yt1, 30, 30);
      this.queue[idx].factor.t += this.queue[idx].factor.speed;
      if (this.queue[idx].factor.t > 1) {
        clearInterval(this.queue[idx].timer);
        this.queue[idx].timer = null;
      }
    },
    onClickImage (e) {
      this.style_img = 'transform:scale(1.3);'
      setTimeout(() => {
        this.style_img = 'transform:scale(1);'
      }, 500)
      let line = besselLines[this.$_.random(0, 2)];
      let img = thumbsUpImgs[this.$_.random(0, 2)];
      let idx = this.queue.length
      this.queue.push({
        timer: setInterval(() => {
          this.drawImage(line, img, idx);
        }, 20),
        factor: this.$_.cloneDeep(factor)
      });
    }
  }
}
</script>


<style lang="less">
._test {
  display: flex;
  position: relative;

  .t-canvas {
    position: fixed;
    right: 20px;
    bottom: 60px;
    width: 90px;
    background-color: transparent;
    .myCanvas {
      background-color: transparent;
      width: 90px;
      height: 400px;
    }
  }

  .t-img {
    position: fixed;
    right: 45px;
    bottom: 30px;
    .bt-img {
      width: 40px;
      height: 40px;
      transform: scale(1);
      -webkit-transform: scale(1);
      -webkit-transition: ease all;
      -moz-transition: ease all;
      transition: ease all;
      -webkit-transition-duration: 700ms;
      -moz-transition-duration: 700ms;
      transition-duration: 700ms;
    }
  }
}
</style>